import { useParams, Link } from 'react-router-dom';
import { useEffect } from 'react';
import { ChevronRight, Clock, Calendar, ArrowRight } from 'lucide-react';
import { setPageTitle } from '../lib/utils';

interface ArticleContent {
  type: 'paragraph' | 'heading' | 'subheading' | 'list' | 'image';
  text?: string;
  items?: string[];
  src?: string;
  alt?: string;
}

export function ArticleDetail() {
  const {
    articleId
  } = useParams();
  // Mock articles data - this would come from an API in a real application
  const articles = [{
    id: 'article-001',
    title: "The Science of Double Cleansing: Why It's Essential",
    category: 'Skincare',
    image: 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: "Discover why beauty experts are advocating for this two-step cleansing method and how it can transform your skin's health and appearance.",
    readTime: '8 min read',
    date: 'June 15, 2023',
    author: 'Sofia Lindström',
    authorTitle: 'Skincare Specialist',
    authorImage: 'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['cleansing', 'skincare routine', 'korean beauty'],
    content: [{
      type: 'paragraph' as const,
      text: 'Double cleansing is a skincare technique that originated in Korea and Japan, and has become increasingly popular worldwide. It involves using two different types of cleansers, one after the other, to thoroughly clean your skin and remove different types of impurities.'
    }, {
      type: 'heading' as const,
      text: 'What is Double Cleansing?'
    }, {
      type: 'paragraph' as const,
      text: 'Double cleansing begins with an oil-based cleanser to remove oil-based impurities such as makeup, sunscreen, and sebum. This is followed by a water-based cleanser to remove water-based impurities like sweat and dirt. The science behind this method is based on the principle that "like dissolves like" - oil-based products are best removed by oil-based cleansers, while water-based impurities are best removed by water-based cleansers.'
    }, {
      type: 'subheading' as const,
      text: 'Step 1: Oil-Based Cleanser'
    }, {
      type: 'paragraph' as const,
      text: "The first step uses an oil cleanser, cleansing balm, or micellar water. These products contain oils that bind to oil-based impurities on your skin. When you rinse or wipe away the cleanser, it takes these impurities with it. Oil cleansers are particularly effective at breaking down stubborn makeup, sunscreen, and excess sebum without stripping your skin's natural moisture."
    }, {
      type: 'subheading' as const,
      text: 'Step 2: Water-Based Cleanser'
    }, {
      type: 'paragraph' as const,
      text: 'The second step uses a gentle foam, gel, or cream cleanser. This removes any remaining residue from the oil cleanser, as well as sweat, dirt, and other water-based impurities. It also cleanses more deeply into the pores for a thorough clean.'
    }, {
      type: 'heading' as const,
      text: 'The Science-Backed Benefits'
    }, {
      type: 'paragraph' as const,
      text: 'Research has shown several benefits of double cleansing when done correctly:'
    }, {
      type: 'list' as const,
      items: ['More effective removal of pollution particles, which can accelerate skin aging', 'Better penetration of skincare products that follow in your routine', 'Reduced likelihood of clogged pores and breakouts', 'Gentler on skin than using a single, harsher cleanser to remove everything', 'Improved overall skin texture and appearance over time']
    }, {
      type: 'heading' as const,
      text: 'Who Should Double Cleanse?'
    }, {
      type: 'paragraph' as const,
      text: 'Double cleansing is particularly beneficial for:'
    }, {
      type: 'list' as const,
      items: ['Those who wear makeup or sunscreen daily', 'People who live in urban, high-pollution environments', 'Individuals with oily or combination skin types', 'Those prone to clogged pores and breakouts']
    }, {
      type: 'paragraph' as const,
      text: 'However, those with very dry or sensitive skin may need to approach double cleansing cautiously, perhaps limiting it to once daily or using extra-gentle formulations.'
    }, {
      type: 'heading' as const,
      text: 'How to Incorporate Double Cleansing Into Your Routine'
    }, {
      type: 'paragraph' as const,
      text: "For most people, double cleansing is best done in the evening to remove the day's accumulation of makeup, sunscreen, oil, and environmental pollutants. In the morning, a single, gentle cleanser is usually sufficient."
    }, {
      type: 'paragraph' as const,
      text: 'When selecting products for double cleansing, consider your skin type and concerns. Those with dry skin might prefer a cleansing oil and a cream cleanser, while those with oily skin might opt for a lightweight cleansing oil followed by a gel or foam cleanser.'
    }, {
      type: 'heading' as const,
      text: 'The Bottom Line'
    }, {
      type: 'paragraph' as const,
      text: "Double cleansing isn't just another step to add to an already complex skincare routine—it's a foundational technique that can significantly improve the health and appearance of your skin. By effectively removing both oil and water-based impurities, you create a clean canvas that maximizes the effectiveness of the products that follow. If you haven't yet incorporated this technique into your skincare ritual, it may be time to give it a try and experience the benefits for yourself."
    }],
    relatedArticles: [{
      id: 'article-004',
      title: 'The Ultimate Evening Skincare Ritual',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '7 min read',
      date: 'May 28, 2023'
    }, {
      id: 'article-006',
      title: 'How to Build a Minimalist Skincare Routine',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '5 min read',
      date: 'May 15, 2023'
    }, {
      id: 'article-010',
      title: 'Ingredient Spotlight: Niacinamide',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '6 min read',
      date: 'April 18, 2023'
    }],
    recommendedProducts: [{
      id: 'sk-004',
      title: 'Green Tea Cleansing Oil',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 34.0,
      category: 'Skincare'
    }, {
      id: 'sk-001',
      title: 'Hydrating Rose Facial Toner',
      brand: 'Pure Bloom',
      image: 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 28.0,
      category: 'Skincare'
    }]
  }, {
    id: 'article-002',
    title: '5 Morning Rituals to Boost Your Energy Naturally',
    category: 'Wellness',
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: 'Start your day with these simple practices that increase energy levels, improve mood, and set a positive tone for the hours ahead.',
    readTime: '6 min read',
    date: 'June 10, 2023',
    author: 'Maya Johnson',
    authorTitle: 'Wellness Expert',
    authorImage: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['morning routine', 'energy', 'wellness tips'],
    content: [{
      type: 'paragraph' as const,
      text: 'The way you start your morning sets the tone for your entire day. By incorporating these simple yet powerful rituals into your morning routine, you can naturally boost your energy levels and create a foundation for sustained vitality throughout the day.'
    }, {
      type: 'heading' as const,
      text: '1. Hydrate with Intention'
    }, {
      type: 'paragraph' as const,
      text: 'After hours without water, your body needs hydration to kickstart your metabolism and flush out toxins. Begin your day with a large glass of water, preferably at room temperature or slightly warm. Add a slice of lemon for extra vitamin C and to support digestion.'
    }, {
      type: 'heading' as const,
      text: '2. Move Your Body'
    }, {
      type: 'paragraph' as const,
      text: 'You don\'t need an intense workout to wake up your body. Just 5-10 minutes of gentle movement like stretching, yoga, or a short walk can increase blood flow, release endorphins, and boost your energy naturally.'
    }, {
      type: 'heading' as const,
      text: '3. Practice Mindful Breathing'
    }, {
      type: 'paragraph' as const,
      text: 'Take 5 minutes for deep, conscious breathing. Try the 4-7-8 technique: inhale for 4 counts, hold for 7, exhale for 8. This oxygenates your blood and activates your parasympathetic nervous system.'
    }, {
      type: 'heading' as const,
      text: '4. Express Gratitude'
    }, {
      type: 'paragraph' as const,
      text: 'Spend a few moments acknowledging three things you\'re grateful for. This simple practice shifts your mindset to positive thinking and has been shown to improve overall well-being and energy levels.'
    }, {
      type: 'heading' as const,
      text: '5. Nourish with Whole Foods'
    }, {
      type: 'paragraph' as const,
      text: 'Choose a breakfast that combines protein, healthy fats, and complex carbohydrates. This provides sustained energy without the crash that comes from sugary or processed foods.'
    }],
    relatedArticles: [{
      id: 'article-005',
      title: 'Facial Massage Techniques for Lymphatic Drainage',
      category: 'Wellness',
      image: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '9 min read',
      date: 'May 20, 2023'
    }],
    recommendedProducts: [{
      id: 'w-001',
      title: 'Morning Energy Blend Tea',
      brand: 'Ritual Wellness',
      image: 'https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 24.0,
      category: 'Wellness'
    }]
  }, {
    id: 'article-003',
    title: 'Clean Makeup Brands That Actually Perform',
    category: 'Makeup',
    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: "Our curated list of clean beauty brands that don't compromise on performance, pigmentation, or staying power.",
    readTime: '10 min read',
    date: 'June 5, 2023',
    author: 'Emma Chen',
    authorTitle: 'Beauty Editor',
    authorImage: 'https://images.unsplash.com/photo-1502323777036-f29e3972d82f?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['clean beauty', 'makeup', 'product recommendations'],
    content: [{
      type: 'paragraph' as const,
      text: 'The clean beauty movement has revolutionized the makeup industry, but finding products that are both clean and high-performing can be challenging. We\'ve tested dozens of clean makeup brands to bring you this curated list of options that truly deliver.'
    }, {
      type: 'heading' as const,
      text: 'What Makes Makeup "Clean"?'
    }, {
      type: 'paragraph' as const,
      text: 'Clean makeup typically avoids ingredients like parabens, sulfates, phthalates, synthetic fragrances, and other potentially harmful chemicals. These brands focus on natural, organic, and non-toxic ingredients while maintaining product efficacy.'
    }, {
      type: 'heading' as const,
      text: 'Top Clean Makeup Brands'
    }, {
      type: 'subheading' as const,
      text: 'Foundation & Complexion'
    }, {
      type: 'list' as const,
      items: ['ILIA - True Skin Serum Foundation', 'RMS Beauty - UnCoverup Concealer', 'Kosas - Tinted Face Oil', 'Ere Perez - Rice Powder Blush']
    }, {
      type: 'subheading' as const,
      text: 'Eye Makeup'
    }, {
      type: 'list' as const,
      items: ['Thrive Causemetics - Liquid Lash Extensions Mascara', 'Honest Beauty - Extreme Length Mascara', 'Pacifica - Dream Big Mascara']
    }, {
      type: 'subheading' as const,
      text: 'Lip Products'
    }, {
      type: 'list' as const,
      items: ['Bite Beauty - Agave Lip Balm', 'Tower 28 - JuiceBalm', 'Merit - Lip Oil']
    }],
    relatedArticles: [{
      id: 'article-008',
      title: 'Summer Makeup Trends Worth Trying',
      category: 'Makeup',
      image: 'https://images.unsplash.com/photo-1588012209206-71c81b7b56d2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '7 min read',
      date: 'April 25, 2023'
    }],
    recommendedProducts: [{
      id: 'm-001',
      title: 'Clean Beauty Foundation',
      brand: 'Pure Glow',
      image: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 42.0,
      category: 'Makeup'
    }]
  }, {
    id: 'article-004',
    title: 'The Ultimate Evening Skincare Ritual',
    category: 'Skincare',
    image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: 'Transform your nighttime routine into a luxurious ritual that promotes skin repair and creates a peaceful transition to sleep.',
    readTime: '7 min read',
    date: 'May 28, 2023',
    author: 'Sofia Lindström',
    authorTitle: 'Skincare Specialist',
    authorImage: 'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['skincare routine', 'nighttime', 'self-care'],
    content: [{
      type: 'paragraph' as const,
      text: 'Your evening skincare routine is more than just cleansing and moisturizing—it\'s an opportunity to unwind, practice self-care, and give your skin the attention it needs to repair and regenerate overnight.'
    }, {
      type: 'heading' as const,
      text: 'The Perfect Evening Routine'
    }, {
      type: 'subheading' as const,
      text: 'Step 1: Remove Makeup & Sunscreen'
    }, {
      type: 'paragraph' as const,
      text: 'Start with an oil-based cleanser or micellar water to gently remove makeup and sunscreen. Take your time with this step—massage the cleanser into your skin for at least 30 seconds.'
    }, {
      type: 'subheading' as const,
      text: 'Step 2: Deep Cleanse'
    }, {
      type: 'paragraph' as const,
      text: 'Follow with a water-based cleanser suited to your skin type. This second cleanse ensures all impurities are removed and your skin is perfectly clean.'
    }, {
      type: 'subheading' as const,
      text: 'Step 3: Treatment Products'
    }, {
      type: 'paragraph' as const,
      text: 'Apply any treatment products like serums or prescriptions. Evening is the perfect time for active ingredients like retinoids, as your skin repairs itself during sleep.'
    }, {
      type: 'subheading' as const,
      text: 'Step 4: Moisturize & Protect'
    }, {
      type: 'paragraph' as const,
      text: 'Finish with a nourishing night moisturizer that supports skin barrier repair and hydration throughout the night.'
    }],
    relatedArticles: [{
      id: 'article-001',
      title: 'The Science of Double Cleansing: Why It\'s Essential',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '8 min read',
      date: 'June 15, 2023'
    }],
    recommendedProducts: [{
      id: 'sk-005',
      title: 'Nighttime Repair Serum',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 58.0,
      category: 'Skincare'
    }]
  }, {
    id: 'article-005',
    title: 'Facial Massage Techniques for Lymphatic Drainage',
    category: 'Wellness',
    image: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: 'Learn how to reduce puffiness, boost circulation, and promote a natural glow with these simple facial massage techniques.',
    readTime: '9 min read',
    date: 'May 20, 2023',
    author: 'Maya Johnson',
    authorTitle: 'Wellness Expert',
    authorImage: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['facial massage', 'lymphatic drainage', 'gua sha'],
    content: [{
      type: 'paragraph' as const,
      text: 'Facial massage is a powerful tool for promoting lymphatic drainage, reducing puffiness, and enhancing your natural glow. By understanding the lymphatic system and proper massage techniques, you can transform your skincare routine into a therapeutic ritual.'
    }, {
      type: 'heading' as const,
      text: 'Understanding the Lymphatic System'
    }, {
      type: 'paragraph' as const,
      text: 'The lymphatic system is a network of vessels and nodes that help remove toxins and excess fluid from your tissues. When it becomes sluggish, you may notice puffiness, dullness, and skin congestion, particularly around the eyes and jawline.'
    }, {
      type: 'heading' as const,
      text: 'Basic Lymphatic Drainage Techniques'
    }, {
      type: 'subheading' as const,
      text: '1. Preparation'
    }, {
      type: 'paragraph' as const,
      text: 'Always start with clean hands and a clean face. Apply a facial oil or serum to provide slip and prevent pulling on the skin.'
    }, {
      type: 'subheading' as const,
      text: '2. Gentle Pressure'
    }, {
      type: 'paragraph' as const,
      text: 'Use light, feather-like pressure. The lymphatic vessels are close to the surface, so deep pressure can actually impede drainage.'
    }, {
      type: 'subheading' as const,
      text: '3. Direction Matters'
    }, {
      type: 'paragraph' as const,
      text: 'Always massage toward the lymph nodes - down from the forehead to the temples, from the center of the face outward, and down the neck.'
    }],
    relatedArticles: [{
      id: 'article-002',
      title: '5 Morning Rituals to Boost Your Energy Naturally',
      category: 'Wellness',
      image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '6 min read',
      date: 'June 10, 2023'
    }],
    recommendedProducts: [{
      id: 'w-002',
      title: 'Gua Sha Stone',
      brand: 'Ritual Tools',
      image: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 28.0,
      category: 'Wellness'
    }]
  }, {
    id: 'article-006',
    title: 'How to Build a Minimalist Skincare Routine',
    category: 'Skincare',
    image: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    excerpt: 'Simplify your skincare without sacrificing results. Our guide to creating an effective routine with fewer products.',
    readTime: '5 min read',
    date: 'May 15, 2023',
    author: 'Emma Chen',
    authorTitle: 'Beauty Editor',
    authorImage: 'https://images.unsplash.com/photo-1502323777036-f29e3972d82f?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    tags: ['minimalism', 'skincare routine', 'essentials'],
    content: [{
      type: 'paragraph' as const,
      text: 'In a world of endless skincare products and complex routines, the minimalist approach offers a refreshing alternative. By focusing on high-quality essentials and understanding your skin\'s actual needs, you can achieve healthy, glowing skin with fewer products.'
    }, {
      type: 'heading' as const,
      text: 'The Core Principles'
    }, {
      type: 'list' as const,
      items: ['Quality over quantity', 'Multi-functional products', 'Consistent application', 'Listen to your skin\'s needs']
    }, {
      type: 'heading' as const,
      text: 'Essential Steps'
    }, {
      type: 'subheading' as const,
      text: 'Morning: Cleanse, Protect'
    }, {
      type: 'paragraph' as const,
      text: 'Start with a gentle cleanser and finish with SPF. If your skin needs extra hydration, add a lightweight moisturizer before sunscreen.'
    }, {
      type: 'subheading' as const,
      text: 'Evening: Cleanse, Treat, Moisturize'
    }, {
      type: 'paragraph' as const,
      text: 'Remove the day with a thorough cleanse, apply one targeted treatment if needed, and seal in moisture with a nourishing cream.'
    }],
    relatedArticles: [{
      id: 'article-001',
      title: 'The Science of Double Cleansing: Why It\'s Essential',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      readTime: '8 min read',
      date: 'June 15, 2023'
    }],
    recommendedProducts: [{
      id: 'sk-006',
      title: 'All-in-One Face Cream',
      brand: 'Simple Beauty',
      image: 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      price: 36.0,
      category: 'Skincare'
    }]
  }
  // Additional articles would be defined here
  ];
  // Find the current article
  const article = articles.find(a => a.id === articleId);

  useEffect(() => {
    if (article) {
      setPageTitle(article.title);
    }
  }, [article]);

  if (!article) {
    return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12 text-center">
        <h1 className="font-serif text-2xl mb-4">Article Not Found</h1>
        <p className="mb-6">
          The article you're looking for doesn't exist or has been removed.
        </p>
        <Link to="/articles" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
          Back to Articles
        </Link>
      </div>;
  }
  // Render content based on type
  const renderContent = (item: ArticleContent, index: number) => {
    switch (item.type) {
      case 'paragraph':
        return <p key={index} className="text-base leading-relaxed mb-6">
            {item.text}
          </p>;
      case 'heading':
        return <h2 key={index} className="font-serif text-2xl text-[#4a4a4a] mb-4 mt-8">
            {item.text}
          </h2>;
      case 'subheading':
        return <h3 key={index} className="font-medium text-lg mb-3 mt-6">
            {item.text}
          </h3>;
      case 'list':
        return <ul key={index} className="list-disc pl-6 mb-6 space-y-2">
            {item.items?.map((listItem, i) => <li key={i} className="text-base">
                {listItem}
              </li>)}
          </ul>;
      case 'image':
        return <div key={index} className="mb-6">
            <img src={item.src} alt={item.alt || ''} className="w-full rounded-lg" />
            {item.alt && <p className="text-sm text-gray-500 mt-2 text-center">
                {item.alt}
              </p>}
          </div>;
      default:
        return null;
    }
  };
  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      {/* Breadcrumbs */}
      <div className="flex items-center text-sm mb-8">
        <Link to="/" className="text-gray-500 hover:text-[#4a6b60]">
          Home
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <Link to="/articles" className="text-gray-500 hover:text-[#4a6b60]">
          Articles
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">{article.category}</span>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a] truncate max-w-[150px] md:max-w-xs">
          {article.title}
        </span>
      </div>
      {/* Article Header */}
      <div className="mb-12">
        <h1 className="font-serif text-3xl md:text-4xl lg:text-5xl text-[#4a4a4a] mb-4">
          {article.title}
        </h1>
        <p className="text-xl text-gray-600 mb-6">{article.excerpt}</p>
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center">
            <img src={article.authorImage} alt={article.author} className="w-12 h-12 rounded-full object-cover mr-4" />
            <div>
              <p className="font-medium">{article.author}</p>
              <p className="text-sm text-gray-500">{article.authorTitle}</p>
            </div>
          </div>
          <div className="flex items-center space-x-6">
            <div className="flex items-center text-sm text-gray-500">
              <Clock size={16} className="mr-2" />
              <span>{article.readTime}</span>
            </div>
            <div className="flex items-center text-sm text-gray-500">
              <Calendar size={16} className="mr-2" />
              <span>{article.date}</span>
            </div>
          </div>
        </div>
      </div>
      {/* Featured Image */}
      <div className="mb-12">
        <img src={article.image} alt={article.title} className="w-full h-[500px] object-cover rounded-lg" />
      </div>
      {/* Article Content */}
      <div className="flex flex-col lg:flex-row gap-12">
        <div className="lg:w-2/3">
          {article.content.map((item, index) => renderContent(item, index))}
          {/* Tags */}
          <div className="mt-12 pt-8 border-t border-[#e8e5e0]">
            <div className="flex flex-wrap gap-2">
              {article.tags.map((tag, index) => <Link key={index} to={`/articles?tag=${tag}`} className="px-3 py-1 bg-[#f3f0eb] rounded-full text-sm hover:bg-[#e8e5e0] transition-colors">
                  {tag}
                </Link>)}
            </div>
          </div>
          {/* Author Bio */}
          <div className="mt-12 bg-[#f3f0eb] p-6 rounded-lg">
            <div className="flex items-start">
              <img src={article.authorImage} alt={article.author} className="w-16 h-16 rounded-full object-cover mr-4" />
              <div>
                <h3 className="font-medium text-lg mb-2">
                  About {article.author}
                </h3>
                <p className="text-sm text-gray-600">
                  {article.authorTitle} with a passion for skincare and beauty.
                  With over 8 years of experience in the industry, she shares
                  expert insights and practical advice to help you achieve your
                  best skin ever.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="lg:w-1/3">
          <div className="sticky top-24 space-y-8">
            {/* Table of Contents */}
            <div className="bg-[#f3f0eb] p-6 rounded-lg">
              <h3 className="font-serif text-xl mb-4">In This Article</h3>
              <ul className="space-y-2">
                {article.content.filter(item => item.type === 'heading').map((heading, index) => <li key={index} className="text-[#4a6b60] hover:text-[#3d5a50]">
                      <a href={`#${heading.text?.toLowerCase().replace(/\s+/g, '-')}`} className="text-sm">
                        {heading.text}
                      </a>
                    </li>)}
              </ul>
            </div>
            {/* Recommended Products */}
            {article.recommendedProducts && <div className="bg-[#f3f0eb] p-6 rounded-lg">
                <h3 className="font-serif text-xl mb-4">
                  Recommended Products
                </h3>
                <div className="space-y-4">
                  {article.recommendedProducts.map((product, index) => <Link key={index} to={`/${product.category.toLowerCase()}/${product.id}`} className="flex items-center group">
                      <div className="w-20 h-20 rounded overflow-hidden flex-shrink-0">
                        <img src={product.image} alt={product.title} className="w-full h-full object-cover" />
                      </div>
                      <div className="ml-4">
                        <p className="text-xs uppercase tracking-wider text-[#4a6b60]">
                          {product.brand}
                        </p>
                        <h4 className="font-medium group-hover:text-[#4a6b60] transition-colors">
                          {product.title}
                        </h4>
                        <p className="text-sm">${product.price.toFixed(2)}</p>
                      </div>
                    </Link>)}
                </div>
              </div>}
            {/* Related Articles */}
            {article.relatedArticles && <div className="bg-[#f3f0eb] p-6 rounded-lg">
                <h3 className="font-serif text-xl mb-4">Related Articles</h3>
                <div className="space-y-4">
                  {article.relatedArticles.map((relatedArticle, index) => <Link key={index} to={`/article/${relatedArticle.id}`} className="block group">
                      <div className="flex items-center">
                        <div className="w-20 h-20 rounded overflow-hidden flex-shrink-0">
                          <img src={relatedArticle.image} alt={relatedArticle.title} className="w-full h-full object-cover" />
                        </div>
                        <div className="ml-4">
                          <p className="text-xs uppercase tracking-wider text-[#4a6b60]">
                            {relatedArticle.category}
                          </p>
                          <h4 className="font-medium group-hover:text-[#4a6b60] transition-colors">
                            {relatedArticle.title}
                          </h4>
                          <p className="text-xs text-gray-500">
                            {relatedArticle.readTime}
                          </p>
                        </div>
                      </div>
                    </Link>)}
                </div>
              </div>}
          </div>
        </div>
      </div>
      {/* CTA Section */}
      <div className="mt-16 bg-[#f3f0eb] p-8 md:p-12 rounded-lg">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="font-serif text-2xl md:text-3xl mb-4">
            Enhance Your Beauty Ritual
          </h2>
          <p className="mb-8">
            Discover our curated collection of skincare products designed to
            complement your beauty routine.
          </p>
          <Link to="/skincare" className="inline-flex items-center bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
            Shop Skincare
            <ArrowRight size={16} className="ml-2" />
          </Link>
        </div>
      </div>
    </div>;
}